import React, { useState, useEffect } from 'react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft, Share } from '@nutui/icons-react'

// 间距
import { Space } from '@nutui/nutui-react'
// 选项卡
import { Tabs } from 'react-vant'
// 商品卡片
import { ProductCard, Tag } from 'react-vant';
// 文本省略
import { Ellipsis, Cell } from '@nutui/nutui-react'
export default function Login() {
    // 这个位置调整头部盒子占比
    let [height, setHeight] = useState('25vh')
    // 选项卡
    const items = ['邻地铁', '配套齐全', '精装修', '有阳台', '首次出租']
    //文本省略
    const content ='NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
    
    return (
        <div

        >
            {/* 头部盒子 */}
            <div style={{
                height: height,
                width: '100%',
                position: 'relative'
            }}>
                <div style={{
                    zIndex: '-1',
                    // 这个位置放置背景图片
                    backgroundImage: 'url(https://img.zcool.cn/community/010c5e5d1b8b24a80121213f2493a4.jpg@1280w_1l_2o_100sh.jpg)',
                    backgroundColor: 'orange',
                    position: 'absolute',
                    width: '100%',
                    height: '110%'
                }}>
                    {/* 头部导航栏 */}
                    <NavBar
                        style={{

                            // 设置为透明色
                            backgroundColor: 'transparent',
                        }}
                        back={<ArrowLeft style={{ color: 'fff' }} />}
                        right={<Share style={{ color: 'fff' }} />}
                        onBackClick={() => Toast.show('返回')}
                    >
                    </NavBar>
                    <div
                        style={{
                            color: '#fff',
                            margin: '0 0 0 5vw'
                        }}
                    >
                        <h3>福冈元大厦</h3>
                        <h3>周边“林地铁”房源</h3>
                    </div>
                </div>
            </div>
            {/* 列表盒子 */}
            <div style={{
                width: '100%',
                // height:`100vh-${height}`,
                height: '75vh',
                borderRadius: '20px 20px 0 0 ',
                backgroundColor: '#fff',
            }}>
                <br></br>
                <Tabs
                    defaultActive={0}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item}`}>
                            {/* 列表项 */}
                            <div style={{display:'flex',padding:'5vw',boxSizing:'border-box',height:'170px'}}>
                                {/* 左侧图片 */}
                                <div style={{height:130,width:130,}} >
                                    <img  style={{ width:'100%', height:'80%',borderRadius:'10px'}}
                                        src='https://ts1.cn.mm.bing.net/th/id/R-C.494ad45a2d5fc5f4d1abd13ed396ea4b?rik=b9bigBP2KgNFUw&riu=http%3a%2f%2fimg1n.soufunimg.com%2fzxb%2f2016_03%2f08%2f40%2f11%2fpic%2f002020463900.jpg&ehk=15NoC6zqXHZRi8%2f4buj9LJkoPNIZSkZYux5MV%2b8YLIc%3d&risl=&pid=ImgRaw&r=0' />
                                </div>
                                {/* 详细信息 */}
                                <div style={{ flex:'1', margin:'0 0 0 2vw', }}>
                                    {/* 标题 */}
                                    <Cell style={{margin:0,padding:0}}>
                                        <Ellipsis  rows={2} content={content} ></Ellipsis>
                                    </Cell>
                                    {/* 简介 */}
                                    <Cell style={{margin:'10px 0',padding:0}}>
                                        <Ellipsis rows={1} style={{fontSize:'10px',color:'#cecece'}} content={content} ></Ellipsis>
                                    </Cell>
                                    {/* 标签 */}
                                    <Cell style={{margin:0,padding:0}}>
                                        <Space>
                                            <Tag style={{backgroundColor:'rgb(237,239,246)',color:'blue'}}>邻地铁</Tag>
                                            <Tag style={{backgroundColor:'rgb(237,239,246)',color:'blue'}}>配置齐全</Tag>
                                            <Tag style={{backgroundColor:'rgb(237,239,246)',color:'blue'}}>精装修</Tag>
                                        </Space>
                                    </Cell>
                                    {/* 价格 */}
                                    <Cell style={{margin:0,padding:0}}>
                                        <p style={{color:'orange',fontSize:'17px'}}>
                                            <span style={{fontWeight:'700'}}>num</span>
                                            <span>元/月</span>    
                                        </p>
                                    </Cell>
                                </div>
                            </div>
                            {/*  */}
                            <div style={{display:'flex',padding:'5vw',boxSizing:'border-box',height:'170px'}}>
                                {/* 左侧图片 */}
                                <div style={{height:130,width:130,}} >
                                    <img  style={{ width:'100%', height:'80%'}}
                                        src='https://ts1.cn.mm.bing.net/th/id/R-C.494ad45a2d5fc5f4d1abd13ed396ea4b?rik=b9bigBP2KgNFUw&riu=http%3a%2f%2fimg1n.soufunimg.com%2fzxb%2f2016_03%2f08%2f40%2f11%2fpic%2f002020463900.jpg&ehk=15NoC6zqXHZRi8%2f4buj9LJkoPNIZSkZYux5MV%2b8YLIc%3d&risl=&pid=ImgRaw&r=0' />
                                </div>
                                {/* 详细信息 */}
                                <div style={{ flex:'1', margin:'0 0 0 2vw', }}>
                                    {/* 标题 */}
                                    <Cell style={{margin:0,padding:0}}>
                                        <Ellipsis  rows={2} content={content} ></Ellipsis>
                                    </Cell>
                                    {/* 简介 */}
                                    <Cell style={{margin:'10px 0',padding:0}}>
                                        <Ellipsis rows={1} style={{fontSize:'10px',color:'#cecece'}} content={content} ></Ellipsis>
                                    </Cell>
                                    {/* 标签 */}
                                    <Cell style={{margin:0,padding:0}}>
                                        <Space>
                                            <Tag style={{backgroundColor:'rgb(237,239,246)',color:'blue'}}>邻地铁</Tag>
                                            <Tag style={{backgroundColor:'rgb(237,239,246)',color:'blue'}}>配置齐全</Tag>
                                            <Tag style={{backgroundColor:'rgb(237,239,246)',color:'blue'}}>精装修</Tag>
                                        </Space>
                                    </Cell>
                                    {/* 价格 */}
                                    <Cell style={{margin:0,padding:0}}>
                                        <p style={{color:'orange',fontSize:'17px'}}>
                                            <span style={{fontWeight:'700'}}>num</span>
                                            <span>元/月</span>    
                                        </p>
                                    </Cell>
                                </div>
                            </div>
                        </Tabs.TabPane>
                    ))}
                </Tabs>

            </div>



        </div>
    )
}
